<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
     
        <el-breadcrumb-item>组装单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主内容区 -->
    <div class="together-content">

      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" label-width="60px" style="width: 100%">
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="单据号/备注"
              clearable
            />
          </el-form-item>

          <el-form-item label="日期：" style="width: 250px">
            <el-date-picker v-model="searchForm.date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div style="margin-bottom: 15px; text-align: right;">
        <el-button type="primary" @click="router.push({name: 'salesEditMerge'})">新增</el-button>
        <el-button type="success" @click="openAddDialog">审核</el-button>
        <el-button type="danger" @click="openAddDialog">删除</el-button>
      </div>


      <el-table :data="assemblyList" style="width: 100%" border>
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="code" label="组装单号" width="140" align="center" />
        <el-table-column prop="mergeDate" label="组装日期" width="160" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.mergeDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="staffNumber" label="创建人" width="140" align="center" />
        <el-table-column prop="verifierNumber" label="审核人" width="140" align="center" />
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
              {{ scope.row.status === 1 ? '已审核' : '待审核' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="scope">
            <!-- <el-button link type="primary" size="small" @click="viewDetail(scope.row)">
              查看详情
            </el-button> -->
            <el-button link type="warning" size="small" @click="router.push({name: 'editMerge', params: {code: scope.row.code}})">
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: center;">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, watch} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import router from '@/router';
let searchForm = ref({});




// ------------------ 数据 ------------------
const assemblyList = ref([
  {
    id: 1,
    code: 'ASSEMBLE-20250401001',
    mergeDate: '2025-04-01 10:00:00',
    staffNumber: 'STAFF-001',
    verifierNumber: 'VERIFIER-001',
    status: 1,
    detailList: [
      {
        goodsName: '螺丝',
        brand: '品牌A',
        attribute: 'M5*20',
        unit: '件',
        warehouse: 'A仓',
        availableStock: '100',
        quantity: 10,
        unitCost: '0.5',
        totalCost: '5.0',
        remark: ''
      }
    ]
  },
  {
    id: 2,
    code: 'ASSEMBLE-20250401002',
    mergeDate: '2025-04-01 14:30:00',
    staffNumber: 'STAFF-002',
    verifierNumber: 'VERIFIER-002',
    status: 0,
    detailList: [
      {
        goodsName: '螺母',
        brand: '品牌B',
        attribute: 'M5',
        unit: '个',
        warehouse: 'B仓',
        availableStock: '200',
        quantity: 5,
        unitCost: '0.2',
        totalCost: '1.0',
        remark: ''
      }
    ]
  }
  
])

const currentPage = ref(1)
const pageSize = ref(10)
const total = computed(() => assemblyList.value.length)

// ------------------ 对话框控制 ------------------
const dialogVisible = ref(false)
const isEditing = ref(false) // 新增编辑状态标记

// ------------------ 表单数据 ------------------
const formData = ref({
  code: '',
  mergeDate: '',
  staffNumber: '',
  verifierNumber: '',
  status: '0'
})

const detailList = ref([
  {
    goodsName: '',
    brand: '',
    attribute: '',
    unit: '',
    warehouse: '',
    availableStock: '',
    quantity: 0,
    unitCost: '',
    totalCost: '',
    remark: ''
  }
])

// 当前选中的商品信息（用于商品信息描述列表）
const currentProduct = ref({
  goodsName: '',
  brand: '',
  attribute: '',
  unit: '',
  warehouse: '',
  availableStock: ''
})



// ------------------ 方法 ------------------
const openAddDialog = () => {
  const now = new Date()
  formData.value.code = `ASSEMBLE-${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}001`
  formData.value.mergeDate = new Date()
  formData.value.staffNumber = 'STAFF-001'
  formData.value.verifierNumber = 'VERIFIER-001'
  formData.value.status = '0'
  
  detailList.value = [{
    goodsName: '',
    brand: '',
    attribute: '',
    unit: '',
    warehouse: '',
    availableStock: '',
    quantity: 0,
    unitCost: '',
    totalCost: '',
    remark: ''
  }]
  
  // 初始化商品信息描述列表
  currentProduct.value = {
    goodsName: '',
    brand: '',
    attribute: '',
    unit: '',
    warehouse: '',
    availableStock: ''
  }
  
  isEditing.value = false
  dialogVisible.value = true
}



const deleteRow = (index) => {
  ElMessageBox.confirm('确定删除该组装单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    assemblyList.value.splice(index, 1)
    ElMessage.success('删除成功')
  })
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString()
}


// 监听明细行变化，更新商品信息描述列表
watch(detailList, (newVal) => {
  if (newVal.length > 0) {
    const currentRow = newVal[0]
    currentProduct.value = {
      goodsName: currentRow.goodsName,
      brand: currentRow.brand,
      attribute: currentRow.attribute,
      unit: currentRow.unit,
      warehouse: currentRow.warehouse,
      availableStock: currentRow.availableStock
    }
  } else {
    currentProduct.value = {
      goodsName: '',
      brand: '',
      attribute: '',
      unit: '',
      warehouse: '',
      availableStock: ''
    }
  }
}, { deep: true })
</script>

<style scoped>
.container {
  padding: 20px;
}

.topNav {
  margin-bottom: 20px;
}

.assembly-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.form-header {
  margin-bottom: 25px;
}

.product-info {
  margin-bottom: 25px;
}

.el-descriptions {
  margin-bottom: 15px;
}

.el-descriptions__label {
  font-weight: bold;
  width: 120px;
}
</style>